<template>
  <!-- 根节点右键菜单 -->
  <div ref="menu" id="menu" class='rootContextMenu' :style="[contextMenuLoc]"
       v-show="ContextMenu.length && isShowMenu">
    <ul class='folderContextMenuul'>
      <li :class="{menuItemDisable:item.disable,muenItem:!item.disable}"
          v-if="item.show"
          v-for="(item,index) in ContextMenu"
          @click.stop='!item.disable?$emit(item.event,ID):null'>
        <div class='folderContextMenuline' v-if="index>0"></div>
        <img :src='item.icon'>
        <span>{{item.text}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'EditorContextMenu',
    props: {
      ContextMenu: {
        type: Array,
        default: () => {
          return []
        }
      },
      DisableMenu: {
        type: Array,
        default: () => {
          return []
        }
      },
      ShowMenu: { type: Boolean, default: true }
    },
    data: function () {
      return {
        isShowMenu: false,
        contextMenuLoc: null
      }
    },
    mounted: function () {
      let menu = this.$refs.menu
      if (menu) menu.parentElement.oncontextmenu = this.setContextMenuShowState

      this.$eventBus.$on('keydown', () => {
        this.isShowMenu = false
      })
      this.$eventBus.$on('pointerup', () => {
        this.isShowMenu = false
      })
    },
    methods: {
      setContextMenuShowState: function () {
        event.stopPropagation()
        event.preventDefault()
        if (!this.ShowMenu) return

        this.isShowMenu = true

        this.$nextTick(function () {
          // let menu = this.$refs.menu;
          // if (!menu) return;
          // let loc = {};
          // if (event.target.offsetWidth > event.offsetX + menu.offsetWidth) {
          //   loc.left = event.offsetX;
          // } else {
          //   loc.left = event.offsetX - menu.offsetWidth;
          // }
          //
          // if (event.target.offsetHeight > event.offsetY + menu.offsetHeight) {
          //   loc.top = event.offsetY;
          // } else {
          //   loc.top = event.offsetY - menu.offsetHeight;
          // }
          //
          // this.contextMenuLoc = {
          //   left: `${loc.left/* + menu.offsetLeft*/}px`,
          //   top: `${loc.top/* + menu.offsetTop */}px`
          // };

          let menu = this.$refs.menu
          if (!menu) return
          let loc = {}
          if (window.innerWidth > event.pageX + menu.offsetWidth) {
            loc.left = event.pageX
          } else {
            loc.left = event.pageX - menu.offsetWidth
          }

          if (window.innerHeight > event.pageY + menu.offsetHeight) {
            loc.top = event.pageY
          } else {
            loc.top = event.pageY - menu.offsetHeight
          }

          this.contextMenuLoc = {
            left: `${loc.left - menu.parentElement.getBoundingClientRect().left/* + menu.offsetLeft */}px`,
            top: `${loc.top - menu.parentElement.getBoundingClientRect().top/* + menu.offsetTop */}px`
          }
        })
      }
    }
  }
</script>
<style scoped>
  .rootContextMenu {
    z-index: 999;
    width: 120px;
    background: white;
    position: absolute;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .folderContextMenuul {
    width: 100%;
    height: 100%;
    /*float: left;*/
    margin: 0 auto;
    padding: 0;
    font-size: 14px;
  }

  .folderContextMenuul li {
    list-style-type: none;
  }

  .folderContextMenuul .muenItem {
    cursor: pointer;
  }

  .folderContextMenuul .menuItemDisable {
    cursor: not-allowed;
    background-color: #D0D0D0;
  }

  /*.folderContextMenuul .menuItemDisable img{*/
  /*background-color:transparent;*/
  /*}*/

  .folderContextMenuul li span {
    line-height: 28px;
    cursor: inherit;
  }

  .folderContextMenuul li img {
    height: 100%;
    padding: 7px;
    padding-right: 3px;
    cursor: inherit;
  }

  .folderContextMenuul .muenItem:hover {
    background: #288ed3;
    color: white;
  }

  .folderContextMenuline {
    width: calc(100% - 10px);
    height: 1px;
    background: #ddd;
    float: left;
    margin: 0 5px;
  }


</style>
